<template>
  <div class="panel-container">
    <panelTitle title="最近签到记录" sub-title="RECENT CHECK-IN RECORDS">
      <div class="more-btn">更多></div>
    </panelTitle>

    <div class="panel-content">
      <div v-for="(item, index) in list" :key="index" class="item">
        <div class="user-pic"></div>
        <div class="user-name">
          {{ item.name }}
        </div>
        <div class="user-visit-time">
          {{ item.time }}
        </div>
      </div>
    </div>
  </div>
</template>

<script setup name="attendance-record">
// 最近签到记录
import { ref } from "vue"

import panelTitle from "../panel-title/index.vue"

const genList = () => {
  return new Array(11).fill("").map((p) => {
    return {
      name: "张三",
      time: "2023-11-12"
    }
  })
}

const list = ref(genList())
</script>

<style lang="scss" scoped>
.panel-container {
  margin-top: 1.25vw;
}

.panel-content {
  width: 100%;
  // width: 456px;
  height: 29.270833vw;

  overflow-y: auto;
  box-sizing: border-box;

  background: linear-gradient(
    360deg,
    rgba(56, 185, 255, 0.16) 0%,
    rgba(56, 185, 255, 0) 100%
  );
  border: 1px solid;
  border-image: linear-gradient(
      360deg,
      rgba(56.000000461936, 185.00000417232513, 255, 1),
      rgba(56.000000461936, 185.00000417232513, 255, 0.11999999731779099)
    )
    1 1;
  border-top: none;
  padding: 0.833333vw;

  // 使用grid实现3行3列布局

  display: grid;
  grid-template-columns: repeat(3, 1fr);

  grid-column-gap: 0.833333vw;
  grid-row-gap: 0.833333vw;

  &::-webkit-scrollbar {
    width: 4px;
    height: 62px;
  }

  &::-webkit-scrollbar-track {
    background-color: transparent;
  }
  &::-webkit-scrollbar-thumb {
    border-radius: 10px;
    // background-color: red;
    background: linear-gradient(180deg, #38b9ff 0%, #0084ff 100%);
    border-radius: 2px;
  }

  .item {
    height: 9.84375vw;

    padding: 0.3125vw 0.3125vw 0.625vw 0.3125vw;
    box-sizing: border-box;

    background: linear-gradient(
      360deg,
      rgba(56, 185, 255, 0.16) 0%,
      rgba(56, 185, 255, 0) 100%
    );
    border: 1px solid;
    border-image: linear-gradient(
        360deg,
        rgba(56.000000461936, 185.00000417232513, 255, 0.20000000298023224),
        rgba(56.000000461936, 185.00000417232513, 255, 0.20000000298023224)
      )
      1 1;

    .user-pic {
      width: 100%;
      height: 7.03125vw;
      background-color: pink;
    }

    .user-name,
    .user-visit-time {
      font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
      font-weight: 400;
      font-size: 0.625vw;
      line-height: 0.625vw;
      text-align: left;
      font-style: normal;
      text-transform: none;
    }

    .user-name {
      margin-top: 0.416667vw;
      margin-bottom: 0.208333vw;
    }
  }
}

.more-btn {
  font-family:
    Alimama ShuHeiTi,
    Alimama ShuHeiTi;
  font-weight: 700;
  font-size: 0.729167vw;
  text-shadow: 0px 0px 0.416667vw rgba(102, 255, 255, 0.46);
  text-align: right;
  font-style: normal;
  text-transform: none;

  margin-right: 0.520833vw;

  background: linear-gradient(90deg, #ffffff 0%, #98d4fa 100%);
  -webkit-background-clip: text; /*将设置的背景颜色限制在文字中*/
  background-clip: text;
  -webkit-text-fill-color: transparent; /*给文字设置成透明*/
}
</style>
